<!-- 切换管理者组件 -->
<template>
	<div class="tagChange">
		<div class="wrap">
			<div class="tag">
				<el-icon style="color: #c8c8c8"><Avatar /></el-icon>
				<span> {{ modelValueView }} </span>
				<el-icon style="color: #c8c8c8; cursor: pointer"><Close /></el-icon>
			</div>
		</div>
		<div class="change" @click="exchange">更换</div>
	</div>
	<custom-dialog
		v-model:visible="visible"
		:title="dialogTitle"
		width="75%"
		@confirm="confirm"
	>
		<div class="changeManager">
			<div class="left">
				<header>
					<Form
						:formList="formList"
						v-model:modelFormData="modelFormData"
						@updateForm="updateForm"
					/>
				</header>
				<main>
					<ul v-if="memberList?.length">
						<li
							v-for="(item, index) in memberList"
							:key="index"
							@click="handelRow(index)"
						>
							<div class="info">
								<img :src="item?.avatar || '/icon/menu/avatar.png'" alt="" />
								<div>
									<span>{{ item.employeeName }}</span>
									<p>{{ item.departmentName }}</p>
								</div>
							</div>
							<el-radio-group v-model="radioActive">
								<el-radio :value="index"> </el-radio>
							</el-radio-group>
						</li>
					</ul>
					<div v-else class="empty">成员列表为空</div>
				</main>
			</div>
			<div class="right">
				<div class="title">原管理者</div>
				<div class="info">
					<img src="/icon/menu/avatar.png" alt="" />
					<div>
						<span>{{ modelValueView }}</span>
						<el-radio-group v-model="radioStatus">
							<el-radio
								:value="value"
								v-for="({ label, value }, index) in userStatusList"
								:key="index"
								>{{ label }}
							</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div style="height: 10px"></div>
				<div class="title">新管理者</div>
				<div class="info" v-if="selectNewInfo">
					<img :src="selectNewInfo?.avatar || '/icon/menu/avatar.png'" alt="" />
					<div>
						<span>{{ selectNewInfo.employeeName }}</span>
						<p>{{ selectNewInfo.departmentName }}</p>
					</div>
				</div>
			</div>
		</div>
	</custom-dialog>
</template>

<script setup lang="ts">
import Form from '@/components/customGmSearch/components/Form.vue'
import { Avatar, Close } from '@element-plus/icons-vue'
import { userStorage } from '@/utils/storage'
import { getCompanyMemberList } from '@/api/company'
const { employeeName } = userStorage.get()
const props = defineProps({
	dialogTitle: {
		type: String,
		default: '更换管理者',
	},
	modelValue: {
		type: String,
		default: '',
	},
})
const modelValueView = computed(() =>
	props.modelValue
		? memberList.value.find((val) => val.id === props.modelValue)?.employeeName
		: employeeName
)
const emits = defineEmits<{
	'update:modelValue': [e: string]
}>()
const visible = ref(false)
const exchange = () => {
	visible.value = true
}
// 确认关闭
const confirm = () => {
	visible.value = false
	selectNewInfo.value && emits('update:modelValue', selectNewInfo.value.id)
}
// 表单更新
const formList = [
	{
		type: 'select',
		props: 'departmentId',
		set: {
			placeholder: '请选择部门',
		},
		options: JSON.parse(localStorage.getItem('departmentList')),
	},
	{
		type: 'searchInput',
		props: 'keyword',
		set: {
			placeholder: '搜索成员姓名',
		},
	},
]
const modelFormData = reactive({
	departmentId: '',
	keyword: '',
	roupId: '',
	enterpriseId: userStorage.get().enterpriseId,
})
const memberList = ref([])
const radioActive = ref(null) //列表勾选
const radioStatus = ref(1) //单选状态
const userStatusList = [
	{ label: '移除', value: 1 },
	{ label: '变更为可编辑', value: 2 },
	{ label: '变更为可阅读', value: 3 },
]
// 获取成员列表
const getMemberList = async () => {
	try {
		const {
			code,
			data: res,
			message,
		} = await getCompanyMemberList(modelFormData)
		if (code === 200) {
			const list = res as Array<any>
			if (list.length > 0) {
				memberList.value = list
			} else {
				memberList.value = []
			}
		} else {
			memberList.value = []
		}
	} catch (error) {
		memberList.value = []
	}
}
onMounted(() => {
	getMemberList()
})
const updateForm = () => {
	getMemberList()
}
const selectNewInfo = ref(null)
const handelRow = (index: number) => {
	radioActive.value = index
	selectNewInfo.value = memberList.value[index]
}
</script>

<style scoped lang="less">
.info {
	display: flex;
	align-items: center;
	> img {
		width: 50px;
		height: 50px;
		border-radius: 50px;
		margin-right: 28px;
	}
	span {
		font-weight: 500;
		font-size: 16px;
		color: #000000;
	}
	p {
		font-weight: 400;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
	}
	> div {
		display: flex;
		flex-direction: column;
	}
}
.tagChange {
	display: flex;
	width: 100%;
	height: 100%;
	.change {
		width: 30px;
		text-align: center;
		color: #006d7a;
		margin-left: 10px;
		cursor: pointer;
	}
	.wrap {
		padding-left: 10px;
		flex-grow: 1;
		border: 1px solid #dcdcdc;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.tag {
			height: 75%;
			padding: 0 10px;
			background-color: #f2f4f6;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			font-size: 14px;

			span {
				margin: 0 5px;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
.changeManager {
	padding: 15px;
	display: flex;
	width: 100%;
	max-height: 500px;
	height: 500px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	.left,
	.right {
		width: 50%;
		.title {
			font-weight: 400;
			font-size: 16px;
			color: #000000;
		}
	}
	.left {
		header {
			height: 60px;
		}
		main {
			height: calc(100% - 60px);
			ul {
				height: 100%;
				overflow: auto;
				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgba(0, 0, 0, 0.06);
					&:not(:last-child) {
						margin-bottom: 15px;
					}
				}
			}
		}
	}
	.right {
		border-left: 1px solid rgba(0, 0, 0, 0.06);
		margin-left: 5px;
		padding: 15px;
		.title {
			margin-bottom: 10px;
		}
	}
}
.empty {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #dcdfe6;
	font-weight: normal;
}
</style>
